<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/product.css">
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script src="/js/qrcode.js"></script>
</head>
<body>
    <header class="header">
        <div class="wrap">
            <div class="logo">
                <img src="/img/logo.png" alt="">
            </div>
            <div class="right-content">
                <div class="link">
                    <a href="/distributor.html" class="link-cell">
                        <span class="icon"><img src="/img/header-icon-1.png" alt=""></span>
                        <span class="name">经销商登录</span>
                    </a>
                    <a href="/quailty.html" class="link-cell">
                        <span class="icon"><img src="/img/header-icon-1.png" alt=""></span>
                        <span class="name">质保查询</span>
                    </a>
                </div>
                <ul class="menu">　
                    <li class="menu-cell"><a href="/">首页</a></li>
                    <li class="menu-cell"><a href="/brand.html">品牌</a></li>
                    <li class="menu-cell active">
                        <a>产品</a>
                        <!-- 产品二级导航 -->
                        <div class="sub-menu">
                            <div class="sub-menu__wrap">
                                <a href="product.html" class="sub-menu__cell">产品介绍</a>
                                <a href="/quoted_part.html" class="sub-menu__cell">产品报价</a>
                            </div>
                        </div>
                    </li>
                    <li class="menu-cell"><a href="/example.html">案例</a></li>
                    <li class="menu-cell"><a href="/news.html">资讯</a></li>
                    <li class="menu-cell"><a href="/store.html">门店</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="product linear">
        <div class="banner"><img src="/img/product/banner.png"></div>
        <div class="top">
            <div class="top-wrap">
                <div class="name">Pro透明系列</div>
                <div class="select">
                    <div class="select-cell" onclick="selectModlaCategory()">
                        <span class="txt">选择产品系列</span>
                        <span class="icon">&gt;</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap-content">
                <div class="desc-car">
                    <img src="/img/product/desc-1.png" width="100%">
                </div>
                <div class="parameter">
                    <div class="strength">
                        <h4>强度参数</h4>
                        <div class="list">
                            <span class="list-cell">剥离强度: 600z/in</span>
                            <span class="list-cell">断裂延展率: 320</span>
                        </div>
                        <div class="list">
                            <span class="list-cell">拉伸强度: 8000psl</span>
                            <span class="list-cell">耐高温度: 120℃</span>
                        </div>
                        <div class="list">
                            <span class="list-cell">撕裂强度: 550pli</span>
                            <span class="list-cell">抗碎石性能: 碎石机模拟通过</span>
                        </div>
                    </div>
                    <div class="strength other">
                        <h4>其他参数</h4>
                        <div class="list">
                            <span class="list-cell">耐磨性: 无磨穿情况<span>(100万次)</span></span>
                            <span class="list-cell">耐腐蚀性: 无损害情况<span>(乙烷/甲苯测试)</span></span>
                        </div>
                        <div class="list">
                            <span class="list-cell">耐化学性: 无损害情况<span>(异丙醇测试)</span></span>
                            <span class="list-cell">耐风化: 无损害情况<span>(老化试验箱1000小时)</span></span>
                        </div>
                        <div class="list">
                            <span class="list-cell">厚度: 7mli</span>
                            <span class="list-cell">质保年限: 5年</span>
                        </div>
                    </div>
                </div>
                <div class="desc-detail">
                    <img src="/img/product/desc-2.png" width="100%">
                </div>
            </div>
            <!-- 选择产品系列 -->
            <div class="modal-select-category" id="modal-select-category" style="display: none;">
                <div class="modal-wrap">
                    <div class="modal-content">
                        <div class="brand-list">
                            <a href="">透明膜</a>
                            <a href="">改色膜</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            // 选择产品系列
            function selectModlaCategory () {
                var dom = document.getElementById('modal-select-category')
                if (dom.style.display == 'none') {
                    showModlaCategory()
                } else {
                    closeModlaCategory()
                }
            }

            function showModlaCategory () {
                var dom = document.getElementById('modal-select-category')
                dom.style.display = 'block'
            }

            function closeModlaCategory () {
                var dom = document.getElementById('modal-select-category')
                dom.style.display = 'none'
            }

        </script>
    </div>
    <footer class="footer">
        <div class="wrap">
            <div class="left-content">
                <img src="/img/logo.png">
                <div class="share">
                    <span class="name">分享：</span>
                    <span id="share-weibo"><img src="/img/share-icon-1.png"></span>
                    <span id="share-wx"><img src="/img/share-icon-2.png"></span>
                    <span id="share-qq"><img src="/img/share-icon-3.png"></span>
                </div>
            </div>
            <div class="right-content">
                <div class="link">　
                    <a href="/product.html" class="link-cell">产品介绍</a>
                    <a href="/quoted_part.html" class="link-cell">产品报价</a>
                    <a href="/distributor.html" class="link-cell">经销商登录</a>
                    <a href="/quailty.html" class="link-cell">质保查询</a>
                </div>
                <p class="phone">服务热线: <span>4001 618 615</span></p>
                <p class="record">2021@版权所有 拜亚(山东)薄膜有限公司<span>粤ICP备05108632号- 13 </span></p>
                <div class="qrcode">
                    <img src="/img/footer-qrcode.png">
                    <p>微信扫一扫</p>
                    <p>了解拜亚膜最新动态</p>
                </div>
            </div>
        </div>
        <div class="qrcode-wx" id="qrcode-wx" style="display: none;">
            <div class="title"><span>分享到微信朋友圈</span></div>
            <span class="close">+</span>
            <div id="qrcode-wx-img"></div>
            <div class="tip">打开微信“扫一扫”即可分享至朋友圈</div>
        </div>
    </footer>
    <script src="/js/share.js"></script>
</body>
</html>